<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品月销量统计</title>
    <style>
        /* 表格整体样式优化，贴合更规范的视觉标准 */
        table {
            width: 600px;
            border-collapse: collapse;
            margin: 50px auto;
            font-family: "Microsoft YaHei", Arial, sans-serif; /* 更换为更适配中文的字体 */
            font-size: 14px; /* 统一基础字体大小 */
        }

        /* 表头与单元格样式细化 */
        th, td {
            border: 1px solid #ff69b4; /* 保留粉色边框，符合需求 */
            padding: 14px 15px; /* 增加内边距，提升视觉舒适度 */
            text-align: center;
        }

        /* 表头样式强化，突出层级 */
        th {
            background-color: #ffe6f2; /* 浅粉色背景，与边框呼应，增强表头识别度 */
            font-weight: 700;
            color: #333; /* 加深字体颜色，提升可读性 */
            font-size: 15px; /* 表头字体略大于内容区 */
        }

        /* 合计行样式优化 */
        tr:last-child {
            background-color: #ccebff; /* 保留浅蓝色背景 */
            font-weight: 700;
            color: #1a73e8; /* 合计行字体改为蓝色，突出统计属性 */
        }

        /* 表格标题样式规范 */
        caption {
            font-size: 1.6em; /* 适度增大标题尺寸，增强视觉焦点 */
            margin-bottom: 12px;
            font-weight: 700;
            color: #333; /* 统一标题颜色，避免过浅 */
            letter-spacing: 1px; /* 增加字间距，提升美观度 */
        }

        /* 内容行hover效果，提升交互体验 */
        tr:not(:last-child):hover {
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <table>
        <caption>产品月销量</caption>
        <tr>
            <th>ID</th>
            <th>产品名称</th>
            <th>销量</th>
        </tr>
        <tr>
            <td>2021090901</td>
            <td>马克杯</td>
            <td>5000</td>
        </tr>
        <tr>
            <td>2021090901</td>
            <td>啤酒杯</td>
            <td>5200</td>
        </tr>
        <tr>
            <td>2021090901</td>
            <td>搪瓷杯</td>
            <td>3500</td>
        </tr>
        <tr>
            <td colspan="2">合计</td>
            <td>13700</td>
        </tr>
    </table>
</body>
</html>